<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情</title>
    <link rel="stylesheet" href="lib/css/bootstrap.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/header.css">
    <link rel="stylesheet" href="css/shopDetail.css">
    <link rel="stylesheet" href="css/shopCommit.css">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <!-- fontawesome字体 -->
    <link rel="stylesheet" href="css/font-awesome.min.css">
</head>

<body>
    <!-- 头部 start -->
    <div id="hs_header">
        <!-- 上部分 大屏幕才显示 -->
        <div class="top-bar d-none d-sm-none d-md-none d-lg-block text-center header">
            <div class="container">
                <div class="headerBox row">

                    <ul class="headerBox_left">
                        <li class="activate_font"><a href="index.html" class="activate_font">书瞳</a></li>
                        <li><a href="login.html">登录</a></li>
                        <li><a href="register.html">注册</a></li>
                    </ul>

                    <ul class="headerBox_right">
                        <li><a href="star.html"><i class="fa fa-star activate_font"></i>&nbsp;&nbsp;收藏</a></li>
                        <li><a href="cart.html"><i class="fa fa-cart-plus activate_font"></i>&nbsp;&nbsp;购物车</a></li>
                        <li class="my">
                            <div>我的&nbsp;&nbsp;<i class="fa fa-caret-left activate_font"></i></div>
                            <ul class="mylist">
                                <li><a href="order.html">订单</a></li>
                                <li><a href="consignee.html">收货地址</a></li>
                                <li><a href="#" class="changePwd" data-toggle="modal" data-target="#changePwd">修改密码</a></li>
                            </ul>

                        </li>
                    </ul>

                </div>

            </div>
        </div>

        <!--下部分-->
        <!-- position-static 取消原来的相对定位 -->

        <nav class="navbar navbar-expand-lg navbar-light position-static container top-bar-2">
            <a class="navbar-brand d-flex justify-content-center align-items-center" href="index.html">
                <img src="images/logo.png" alt="">
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="index.html">首页 <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="shopList.html">全部</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">计算机</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">文学</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">哲学</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">历史</a>
                    </li>

                </ul>
                <form class="form-inline my-2 my-lg-0">
                    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
                </form>
            </div>
        </nav>

    </div>

    <!-- 修改密码框 -->
    <div class="modal fade" id="changePwd" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">修改密码</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="changePwdForm">
                        <div class="form-group">
                            <label for="text1" class="col-form-label">新密码:</label>
                            <input type="text" class="form-control" id="text1" name="passwd">
                        </div>
                        <div class="form-group">
                            <label for="text2" class="col-form-label">确认密码:</label>
                            <input type="text" class="form-control" id="text2" name="repeat_passwd">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="saveChange">确认修改</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 头部 end -->

    <hr>
    <!-- 商品详情 start-->
    <div id="shopDetail">
        <!-- 图片及轮播 -->
        <div class="shopLeft">
            <!-- 大图 -->
            <div id="shopLeftBox">
                <img src="images/10b.jpg" alt="" class="bimage">
                <span id="lay"></span>
            </div>

            <!-- 大图片 -->
            <div id="shopLeftBigBox">
                <img src="images/10b.jpg" alt="" class="bimage">
            </div>

            <!-- <img src="image/10b.jpg" alt=""> -->

            <!-- 小图 -->
            <div class="mt12">
                <img src="images/10b.jpg" alt="" class="simage ml12">
                <img src="images/10m.jpg" alt="" class="simage">
            </div>

        </div>

        <!-- 商品价格等 -->
        <div class="shopRight">
            <h3>算法导论</h3>

            <!-- 价格 -->
            <div class="priceArea">
                <div class="priceBox">
                    <div>
                        <span>现价</span>
                        <span class="yourprice">￥118.99</span>
                    </div>
                    <div>
                        <span>原价</span>
                        <span class="price">￥138.99</span>
                        <span class="discount">7.52折</span>
                    </div>
                </div>
                <span class="star"><a href="#">&#xf005 收藏</a></span>
            </div>

            <!-- 销量与评价 -->
            <div class="cArea">
                <div>
                    <span>月销量</span>
                    <span class="activate_font">3701</span>
                </div>
                <div>
                    <span>累计评价</span>
                    <span class="activate_font">12</span>
                </div>
            </div>

            <!-- 数量、库存 -->
            <div class="numArea">
                <span>数量</span>
                <div class="btnBox">
                    <button id="subShop">-</button>
                    <div>
                        <input type="text" value="1" id="shopNum">
                    </div>
                    <button id="addShop">+</button>
                </div>
                <span>库存123件</span>
            </div>

            <!-- 按钮 -->
            <div class="btnArea">
                <button class="buyNow">立即购买</button>
                <button class="toCart">&#xf217 加入购物车</button>
            </div>

        </div>
    </div>

    <!-- 商品详情 end -->


    <!-- 评论 start -->
    <!-- 商品介绍及评论 -->
    <div id="shopCommit">
        <div class="shopCommitTitle">
            <div class="activate" id="detailBtn">商品详情</div>
            <div id="commitBtn">评论 123</div>
        </div>

        <!-- 商品详情 -->
        <div class="shopCommitContent" id="shopCommitContent1">
            <div class="detailBox">
                <span>内容简介：</span>
                <span>本书既可作为高年级本科生或低年级研究生的数据库课程教材，也可供数据库领域的技术人员参考。本书既可作为高年级本科生或低年级研究生的数据库课程教材，也可供数据库领域的技术人员参考。本书既可作为高年级本科生或低年级研究生的数据库课程教材，也可供数据库领域的技术人员参考。</span>
            </div>
        </div>

        <!-- 评论 -->
        <div class="shopCommitContent" id="shopCommitContent2" style="display: none;">
            <!-- 一条评论 -->
            <div class="commitBox">
                <div class="commitBoxLeft">
                    <span>发货很快，书本质量很好，疯狂学习中~~</span>
                    <span class="sf mt12">2020-07-06 18:49:12</span>
                </div>
                <div class="commitBoxLeft sf">
                    123@qq.com
                </div>
            </div>

            <!-- 一条评论 -->
            <div class="commitBox">
                <div class="commitBoxLeft">
                    <span>发货很快，书本质量很好，疯狂学习中~~发货很快，书本质量很好，疯狂学习中~~发货很快，书本质量很好，疯狂学习中~~发货很快，书本质量很好，疯狂学习中~~发货很快，书本质量很好，疯狂学习中~~发货很快，书本质量很好，疯狂学习中~~发货很快，书本质量很好，疯狂学习中~~发货很快，书本质量很好，疯狂学习中~~</span>
                    <span class="sf mt12">2020-07-06 18:49:12</span>
                </div>
                <div class="commitBoxLeft sf">
                    123@qq.com
                </div>
            </div>

            <!-- 没有评论时显示 -->
            <div class="commitBox" style="display: none;">
                <div class="commitBoxLeft">
                    <span class="activate_font">恭喜你发现了新大陆！来发表第一条评论吧！</span>
                </div>

            </div>
        </div>
    </div>

    <!-- 评论 end -->

    <!-- js文件 -->
    <script src="lib/js/jquery-3.3.1.js"></script>
    <script src="lib/js/popper.js"></script>
    <script src="lib/js/bootstrap.js"></script>
    <script src="js/header.js"></script>
    <script src="js/shopDetail.js"></script>
</body>

</html>